<template>
  <el-dialog
    :title="dialogTitle"
    top="25vh"
    :visible.sync="dialogVisible"
    close-on-press-escape
    :before-close="cancel"
    @open="init"
  >
    <div v-loading="loading" class="material-container" style="padding: 10px;">
      <el-form
        ref="material"
        :model="material"
        class="form-container"
        :rules="AddRules"
        label-width="80px"
      >
        <el-form-item label="材料名称" prop="name">
          <el-input v-model="material.name" />
        </el-form-item>
        <el-form-item label="材料介绍" prop="introduction">
          <el-input v-model="material.introduction" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="material.remark" />
        </el-form-item>
        <el-form-item style="margin-bottom: 0px;">
          <el-button style="float: right;margin-left: 10px;" type="primary" @click="submitForm('material')">{{ id? '修改':'添加' }}</el-button>
          <el-button style="float:right;" @click="cancel('material')">取 消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
// import { parseTime } from '@/utils'
import { modifyMaterial, addMaterial, getMaterialInfo } from '@/api/materialInventory'
import { Message } from 'element-ui'

export default {
  name: 'InventoryDialog',
  props: {
    dialogVisible: Boolean,
    dialogTitle: {
      type: String,
      default() {
        return ''
      }
    },
    id: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      material: {
        introduction: '',
        name: '',
        remark: ''
      },
      // selectLoading: false,
      // options: [],
      AddRules: { // 对话框表单验证
        name: [{ required: true, message: '材料名称', trigger: 'blur' }],
        introduction: [{ required: true, message: '材料介绍不能为空', trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    init() {
      if (this.id) {
        this.loading = true
        getMaterialInfo(this.id).then(res => {
          if (res) {
            this.material.name = res.data.data.name
            this.material.introduction = res.data.data.introduction
            this.material.remark = res.data.data.remark
            setTimeout(() => {
              this.listLoading = false
            }, 2 * 1000)
          }
          this.loading = false
        })
      }
    },
    // getSelectList() {
    //   this.selectLoading = true
    //   getEmployeeList().then(res => {
    //     if (res) {
    //       const list = res.data.list
    //       const optionList = []
    //       list.forEach(item => {
    //         const obj = {}
    //         obj.value = item.name
    //         obj.id = item.id
    //         optionList.push(obj)
    //       })
    //       this.options = optionList
    //       setTimeout(() => {
    //         this.selectLoading = false
    //       }, 2 * 1000)
    //     }
    //     this.selectLoading = false
    //   })
    // },
    // getEmployeeInfo(payload) {
    //   getEmployeeInfo(payload.id).then(res => {
    //     if (res) {
    //       this.material.employeeId = payload.id
    //       this.material.employeeType = res.data.data.type
    //       this.material.baseWage = res.data.data.baseWage
    //     }
    //   })
    // },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.id) {
            modifyMaterial(this.id, this.material).then(res => {
              if (res) {
                Message({
                  message: res.data.message,
                  type: 'success',
                  duration: 5 * 1000
                })
                this.cancel()
              }
            })
            this.$emit('getTable')
          } else {
            addMaterial(this.material).then(res => {
              if (res) {
                Message({
                  message: res.data.message,
                  type: 'success',
                  duration: 5 * 1000
                })
                this.$refs[formName].resetFields()
                this.$emit('closeDialog')
              }
            })
            this.$emit('getTable')
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.$emit('closeDialog')
      this.$refs.material.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-dialog {
  height: 300px;
  width: 40%;
}
::v-deep .el-dialog__body {
  overflow-y: auto;
  height: 245px;
  padding: 0;
}
.el-form-item{
  margin-bottom: 20px;
}
</style>
